<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="./js/vue.js"></script>
		<script src="./js/asiox.js"></script>
		<script src="js/common.js"></script>
		<script src="./js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<p style="display: flex;">
				<el-page-header @back="goBack" content="菜单页面">
				</el-page-header>
				<el-button-group style="margin-left: 20px;">
					<el-button size="mini" type="primary" icon="el-icon-plus" @click="ins"></el-button>
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="update"></el-button>
				</el-button-group>
			</p>
			<div style="text-align: center;">
				<ol v-for="imte in list">
					<div>
						<h3 @click="selbyid(imte.menuid)">{{imte.label}}</h3>
						<el-button-group>
							<el-button size="mini" type="primary" icon="el-icon-plus"
								@click="insOne(imte.menuid)"></el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="updateTwo(imte.menuid)"></el-button>
						</el-button-group>
					</div>
					<li v-for="name in imte.children">
						<div>
							<span @click="selbyid(name.menuid)">{{name.label}}</span>
						</div>
					</li>
				</ol>
			</div>
			<!-- 新增 -->
			<el-dialog :title="msg" :visible.sync="dialogFormVisible">
				<el-form :model="menuinfo" :rules="rules" ref="menuinfos">
					<el-form-item label="菜单标题:" prop="label" :label-width="formLabelWidth">
						<el-input v-model="menuinfo.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址:" prop="href" :label-width="formLabelWidth">
						<!-- 格式:xxxx.html -->
						<el-input v-model="menuinfo.href" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单log图:" prop="iconcls" :label-width="formLabelWidth">
						<el-input v-model="menuinfo.iconcls" autocomplete="off"></el-input>
					</el-form-item>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="insertOne">确 定</el-button>
				</div>
			</el-dialog>
			
			<!-- 删除 -->
			<el-dialog :title="msg" :visible.sync="one">
				<template>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column prop="menuid" label="id" width="60">
						</el-table-column>
						<el-table-column prop="label" label="菜单标题" width="100">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>

							</template>
						</el-table-column>
					</el-table>
				</template>
				<div slot="footer" class="dialog-footer">
					<el-button @click="one = false">取 消</el-button>
				</div>
			</el-dialog>
			
			<!-- 修改 -->
			<el-dialog :title="msg" :visible.sync="up">
				<el-form :model="menuinfo" :rules="rules" ref="menuinfoupdate">
					<el-form-item label="菜单标题:" prop="label" :label-width="formLabelWidth">
						<el-input v-model="menuinfo.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址:" prop="href" :label-width="formLabelWidth">
						<!-- 格式:xxxx.html -->
						<el-input v-model="menuinfo.href" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单log图:" prop="iconcls" :label-width="formLabelWidth">
						<el-input v-model="menuinfo.iconcls" ></el-input>
					</el-form-item>
					
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="updateOne()">确 定</el-button>
				</div>
			</el-dialog>
			
			
			<el-dialog  :visible.sync="sel">
				<el-descriptions title="菜单信息">
				    <el-descriptions-item label="菜单id">{{menuinfo.menuid}}</el-descriptions-item>
				    <el-descriptions-item label="菜单标题">{{menuinfo.label}}</el-descriptions-item>
				    <el-descriptions-item label="菜单地址">{{menuinfo.href}}</el-descriptions-item>
					<el-descriptions-item label="菜单上级id">{{menuinfo.parentid}}</el-descriptions-item>
				    <el-descriptions-item label="菜单log图"> {{menuinfo.iconcls}}</el-descriptions-item>
				</el-descriptions>
			</el-dialog>
		</div>
	</body>
</html>
<script>
	new Vue({
		el: "#app",
		data: {
			sel:false,
			up:false,
			tableData: [],
			one: false,
			formLabelWidth: '120px',
			dialogFormVisible: false,
			list: [],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			msg: "新增菜单",
			menuinfo: {
				menuid: "",
				label: "",
				href: "",
				parentid: "",
				iconcls: ""
			},
			rules: {
				label: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				href: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
				iconcls: [{
					required: true,
					message: '请输入',
					trigger: 'blur'
				}],
			},
			menuid:0,
			parentid:0,
			

		},
		methods: {
			selbyid(id){
				this.sel=true
				axios.get(API+"selectMenuOne?id="+id).then((res)=>{
					console.log(res.data.data.menuinfo);
					this.menuinfo=res.data.data.menuinfo
					console.log(this.menuinfo);
					this.menuid=res.data.data.menuinfo.menuid
					this.parentid=res.data.data.menuinfo.parentid
					// alert(this.menuid)
					// alert(this.parentid)
				})
			},
			handleEdit(index,row){
				this.up=true
				alert(row.menuid)
				axios.get(API+"selectMenuOne?id="+row.menuid).then((res)=>{
					console.log(res.data.data.menuinfo);
					this.menuinfo=res.data.data.menuinfo
					this.menuid=res.data.data.menuinfo.menuid
					this.parentid=res.data.data.menuinfo.parentid
					// alert(this.menuid)
					// alert(this.parentid)
				})
			},
			updateOne(){
				this.$refs.menuinfoupdate.validate((valid) => {
					if (valid) {
						console.log(this.menuinfo)
						// alert(this.menuid)
						// alert(this.parentid)
						this.menuinfo.menuid=this.menuid
						this.menuinfo.parentid=this.parentid
						axios.post(API+"updateMenuOne",{
							menuid: this.menuinfo.menuid,
							label:  this.menuinfo.label,
							href: this.menuinfo.href,
							parentid: this.menuinfo.parentid,
							iconcls:  this.menuinfo.iconcls
						}).then((res)=>{
							console.log(res);
							alert(res.data)
							this.up=false
						})
						}
			})
			},
			handleDelete(index, row) {
				this.$confirm('是否要删除', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					})
					.then(() => {
						console.log(row);
						if (row.parentid == 0) {
							axios.get(API + "deleteMenuOne?id=" + row.menuid).then((res) => {
								console.log(res);
								alert(res.data)
								this.init()
								this.one = false
							})
						} else {
							// alert(row.menuid)
							axios.get(API + "deleteMenuTwo?id=" + row.menuid).then((res) => {
								console.log(res);
								alert(res.data)
								this.init()
								this.one = false
							})
						}

					})
					.catch(action => {

					});
			},
			update() {
				this.tableData = []

				// console.log("1234567890");
				// console.log(this.lists);
				for (var i = 0; i < this.list.length; i++) {
					let ones = {
						menuid: this.list[i].menuid,
						label: this.list[i].label,
						href: this.list[i].href,
						parentid: this.list[i].parentid,
						iconcls: this.list[i].iconcls
					}
					this.tableData.push(ones)
				}
				// console.log("23435");
				// console.log(this.tableData);
				this.one = true
				this.msg = "修改菜单"
			},
			ins() {
				this.msg = "新增菜单"
				this.menuinfo = {
					menuid: "",
					label: "",
					href: "",
					parentid: "",
					iconcls: ""
				}
				this.dialogFormVisible = true
			},
			insertOne() {
				this.$refs.menuinfos.validate((valid) => {
					if (valid) {
						// alert(JSON.stringify(this.menuinfo))
						// alert(JSON.stringify(this.menuinfo.parentid));
						if (this.menuinfo.parentid == '') {
							axios.post(API + "insertMenuOne", {
								menuid: 0,
								label: this.menuinfo.label,
								href: this.menuinfo.href,
								parentid: 0,
								iconcls: this.menuinfo.iconcls
							}).then((res) => {
								console.log(res);
								alert(res.data)
								this.init()
								this.dialogFormVisible = false
							})
						} else {
							axios.post(API + "insertMenuTwo", {
								menuid: 0,
								label: this.menuinfo.label,
								href: this.menuinfo.href,
								parentid: this.menuinfo.parentid,
								iconcls: this.menuinfo.iconcls
							}).then((res) => {
								console.log(res);
								alert(res.data)
								this.init()
								this.dialogFormVisible = false
							})
						}

					}
				})
			},
			insOne(menuid) {
				this.menuinfo={
					menuid: "",
					label: "",
					href: "",
					parentid: "",
					iconcls: ""
				}
				this.msg = "新增菜单"
				this.menuinfo.parentid = menuid
				this.dialogFormVisible = true
			},
			updateTwo(menuid) {
				this.tableData = []
				this.menuinfo.menuid = menuid
				axios.get(API + "selectMenuTwo?parentId=" + menuid).then((res) => {
					console.log("13243");
					console.log(res.data.data.menuinfos);
					for (var i = 0; i < res.data.data.menuinfos.length; i++) {
						this.tableData.push(res.data.data.menuinfos[i])
					}
					console.log("23435");
					console.log(this.tableData);
					this.one = true
					this.msg = "修改菜单"

				})

			},
			init() {
				// alert(this.token)
				axios.get(API + "selectListAll").then((res) => {
					console.log(res.data.data.menuinfos);
					let s = arrayToTree(res.data.data.menuinfos)
					console.log(s);
					this.list = s
				}).catch(err => {
					console.log(err);
				})
			},
			goBack() {
				//返回到登录了
				window.history.back()
				  // this.$router.go(-1); // 或使用 this.$router.back() 或 window.history.back()
			},

		},
		created() {
			this.init()

		}





	})
</script>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}


	ol {
		list-style: none;
		/* 移除列表前的默认标记 */
		padding: 0;
		/* 移除默认的内边距 */
		margin: 0;
		/* 移除默认的外边距 */
		display: inline-block;
		/* 设置为行内块级元素 */
		vertical-align: top;
		/* 顶部对齐 */
		margin-right: 10px;
		/* 列表之间的间距 */
		width: 200px;
		text-align: center;
		margin-top: 20px;

	}

	li {
		display: block;
		/* 列表项默认为块级元素 */
		padding: 5px;
		/* 列表项内边距 */



	}
</style>